/**
 * 开店星新零售管理系统
 * @description 基于Yii2+Vue2.0+uniapp研发，H5+小程序+公众号全渠道覆盖，功能完善开箱即用，框架成熟易扩展二开
 * @author 青岛开店星信息技术有限公司
 * @link https://www.kaidianxing.com
 * @copyright Copyright (c) 2020-2022 Qingdao ShopStar Information Technology Co., Ltd.
 * @copyright 版权归青岛开店星信息技术有限公司所有
 * @warning Unauthorized deletion of copyright information is prohibited.
 * @warning 未经许可禁止私自删除版权信息
 */
<template>
    <div class="rules-goods-table">
        <Form ref="goodsForm" :model='form' :rules='rules'>
            <Table :columns="columns" :data="form.goodsList">
                <template slot-scope="{ row }" slot="shop">
                    <div class="shop-box">
                        <div class="image">
                            <img :src="$media(row.thumb)" @error="replaceImage">
                        </div>
                        <div class="title-content">
                            <div class="content-text">
                            <span class="mark" :style="row.has_option == 1?'display:inline-block':'display:none'">多</span>
                                <span class="mark" :class="row.type == 0?'real':(row.type == 1?'virtual':(row.type == 2? 'secret':''))">{{row.type == 0?'实':(row.type == 1?'虚':(row.type == 2? '密':''))}}</span>
                                <span class="text">{{row.title}}</span>
                            </div>
                        </div>
                    </div>
                </template>
                <template slot-scope="{ row }" slot="price">
                    <div class="price">
                        <div v-if="row.has_option == 1" class="flex-wrap">
                            <div>￥{{row.min_price}}</div><div>~</div><div>￥{{row.max_price}}</div>
                        </div>
                        <span v-else>￥{{row.price}}</span>
                    </div>
                </template>
                <template slot-scope="{ row }" slot="stock">
                    <div>{{parseInt(row.stock)>999?'999+':parseInt(row.stock)}}</div>
                </template>
                <template slot-scope="{ row, index }" slot="rules">
                    <div class="deposit-btn" v-if="row.has_option == 1">
                        <Button class="default-primary off-set" v-if="!isSetRules(row)" @click="handleSelectOption(row.id)">未设置秒杀库存及价格</Button>
                        <Button class="default-primary on-set" v-else @click="handleSelectOption(row.id)">已设置（可点击修改）</Button>
                    </div>
                    <div class="flex" v-else>
                         <div class="table-input">
                            <FormItem :prop="`goodsList.${index}.activity_stock`" :rules="rules.activity_stock">
                                <kdx-rr-input type="text" number :fixed='0' :maxValue="999999999" v-model="form.goodsList[index].activity_stock" :disabled="type !== 'add'">
                                    <span slot="append">件</span>
                                </kdx-rr-input>
                            </FormItem>
                        </div>
                        <div class="table-input">
                            <FormItem :prop="`goodsList.${index}.activity_price`" :rules="rules.activity_price">
                                <kdx-rr-input type="text" number :fixed='2' :maxValue="9999999.99" v-model="form.goodsList[index].activity_price" :disabled="type !== 'add'">
                                    <span slot="append">元</span>
                                </kdx-rr-input>
                            </FormItem>
                        </div>
                       
                    </div>
                </template>
            </Table>
        </Form>
        <div class="footer-page" v-show="form.goodsList && form.goodsList.length > 0">
            <kdx-page-component ref="page" :total="total" @on-change="changePage"></kdx-page-component>
        </div>
        <!-- 多规格规则设置 -->
        <specifications-rules v-model="specificationsData.rulesModal"
                              :goodsId="specificationsData.goodsId"
                              :type="type"
                              :spaceRules="specificationsData.spaceRules"
                              @spaceGoods="handleSpaceGoods">
        </specifications-rules>
    </div>
</template>

<script>

    import specificationsRules from './SpecificationsRules'

    export default {
        name: "RulesGoods",
        components: {
            specificationsRules
        },
        props: {
            value: {
                type: Array,
                default: () => []
            },
            type: {
                type: String,
                default: ''
            }
        },
        data() {
            return {
                page: {
                    pageSize: 10,
                    pageNumber: 1,
                },
                total: 0,
                specificationsData: {
                    rulesModal: false,
                    goodsId: '',
                    spaceRules: [], // 多规格规则
                },
                form: {
                    goodsList: [],
                },
                rules: {
                    activity_price: [
                        {
                            validator: (rule, value, callback) => {
                                let index = rule.field.split('.')[1];
                                if(Number(this.form.goodsList[index].price) <= Number(value)){
                                    callback(new Error(`秒杀价格需小于售价`))
                                } else if( !value) {
                                    callback(new Error(`秒杀价格不能为空`))
                                }  else {
                                    callback()
                                }
                            }
                        }
                    ],
                    activity_stock: [
                        {
                            validator: (rule, value, callback) => {
                                let index = rule.field.split('.')[1];
                                if(Number(this.form.goodsList[index].stock) < Number(value)){
                                    callback(new Error('秒杀库存大于库存'))
                                } else if( !value) {
                                    callback(new Error('秒杀库存不能为空'))
                                } else if(Number(value) === 0 ) {
                                    callback(new Error('秒杀库存不能为0'))
                                } else {
                                    callback()
                                }
                            }
                        }
                    ]
                }
            }
        },
        computed: {
            columns() {
                let columns = [
                    {
                        title: '商品',
                        slot: 'shop',
                        minWidth: 220,
                    },
                    {
                        title: '价格',
                        slot: 'price',
                        minWidth: 130,
                    },
                    {
                        title: '现库存',
                        slot: 'stock',
                        minWidth: 80
                    },
                    {
                        slot: 'rules',
                        minWidth: 350,
                        renderHeader: () => {
                            return (
                                <div class="flex">
                                    <p class="table-title">秒杀库存</p>
                                    <p class="table-title">秒杀价格</p>
                                </div>
                            );
                        },
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 80,
                        render: (h, params) => {
                            return (
                                <Button type="text" class="action-btn" disabled={this.type !== 'add'} onClick={() => {this.handleDelete(params.index)}}>删除</Button>
                            )
                        }
                    },
                ];
                return columns
            },
        },
        watch: {
            value: {
                handler() {
                    this.$nextTick(() => {
                        this.reset();
                    });
                },
                immediate: true
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            validateForm() {
                return new Promise((resolve, reject) => {
                    if (this.form.goodsList.some(item => item.has_option == 0)) {
                        this.$refs['goodsForm'].validate(valid => {
                            if (valid) {
                                resolve()
                            } else {
                                reject()
                            }
                        })
                    } else {
                        resolve()
                    }
                })
            },
            reset() {
                this.$refs['page']?.reset();
                this.page = {
                    pageSize: 10,
                    pageNumber: 1
                };
                this.getPageData();
            },
            // 获取当前显示的商品
            getPageData() {
                this.total = this.value.length;
                let start = this.page.pageSize * (this.page.pageNumber - 1),
                    end = this.page.pageSize * this.page.pageNumber;
                this.form.goodsList = this.value.slice(start, end);
            },
            // 切换页码
            changePage(page) {
                this.page = page;
                this.getPageData();
            },
            // 删除
            handleDelete(index) {
                let pageIndex = (this.page.pageNumber-1)*this.page.pageSize + index;
                this.$emit('delete', pageIndex);
            },
            handleSelectOption(id) {
                this.specificationsData.rulesModal = true;
                this.specificationsData.goodsId = id;
                this.form.goodsList.map(item => {
                    if (item.id == id && item?.rules?.length>0) {
                        this.specificationsData.spaceRules = item.rules
                    }
                })
            },
            handleSpaceGoods(data) {
                let list = this.value.map(item => {
                    if (item.id == data.id) {
                        item.goods_id = item.id;
                        item.rules = data.rules;
                    }
                    return item
                });
                this.$emit('input', list);
            },
            isSetRules(item){
                return item.rules?.length> 0 && item.rules?.some(item=>item.is_join == '1')
            }
        },
    }
</script>

<style lang="scss" scoped>
    .rules-goods-table {
        padding: 0 20px;
        background-color: #ffffff;

        .flex-wrap {
            display: flex;
            flex-wrap: wrap;
        }

        /deep/ .ivu-table {
            .ivu-table-body {
                margin-bottom: -2px;
            }
            th {
                padding: 0;
                .ivu-table-cell {
                    width: 100%;
                    padding: 15px;
                }
                .table-title {
                    /*width: 33.33%;*/
                    /*flex-shrink: 0;*/
                    flex: 1;
                    padding: 0 5px;
                }
            }
            td {
                .ivu-table-cell {
                    overflow: inherit;
                }
                .shop-box {
                    display: flex;
                    flex-wrap: nowrap;

                    .image {
                        width: 60px;
                        height: 60px;
                        margin-right: 10px;
                        border: 1px solid $border-color;
                        border-radius: 2px;
                        overflow: hidden;

                        > img {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .title-content {
                        width: 100%;
                        flex: 1;

                        .content-text {
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2;
                            overflow: hidden;
                            height: 50px;
                            padding: 10px 0;

                            .mark {
                                @include font-12-16;
                                color: #ed4014;
                                background-color: #ffefe6;
                                border-radius: 2px;
                                margin-right: 4px;
                                width: 18px;
                                height: 18px;
                                text-align: center;
                                line-height: 18px;
                                display: inline-block;

                                &:nth-last-child(2) {
                                    margin-right: 6px;
                                }

                                &.real {
                                    background-color: #F0FAFF;
                                    color: #2D8CF0;
                                }

                                &.virtual {
                                    background-color: #E6FFF9;
                                    color: #00C5C5;
                                }
                                &.secret {
                                    background-color: #FFCDD0;
                                    color: #FF000F;
                                }
                            }

                            .text {
                                @include font-14-20;
                            }
                        }
                    }
                }

                .price {
                    color: $text-first;
                    word-break: break-all;
                    @include font-14-20-bold;
                }
                .table-input {
                    /*width: 33.33%;*/
                    /*flex-shrink: 0;*/
                    flex: 1;
                    padding: 0 5px;


                    .ivu-form-item {
                        margin-bottom: 0!important;
                    }

                   .ivu-form-item-error-tip {
                        padding-left: 0 !important;
                        width: max-content;
                    }
                }
                .ivu-btn {
                    width: 100%;
                }
                .deposit-btn {
                    padding: 0 5px;

                     .off-set {
                        color: #ff3c29;
                         &:hover {
                            border-color: transparent;
                            background: #f4f6f8;
                        }
                    }

                    .on-set {
                        color: #19be6b;
                        
                        &:hover {
                            border-color: transparent;
                            background: #f4f6f8;
                        }
                    }
                }
                .next-box {
                    .ivu-form-item-error-tip {
                        padding-left: 0 !important;
                    }
                }
            }
        }

        /deep/ .action-btn {
            text-align: left;
        }
        .footer-page {
            border-top: 1px solid $border-color;
            background-color: #ffffff;
            padding-top: 20px;
            display: flex;
            justify-content: center;
        }
    }
</style>